import { PageContainer } from '@ant-design/pro-layout';
import { Button, message,Spin,  Popconfirm, Modal} from 'antd';
import ProTable from '@ant-design/pro-table';

import React, { useRef, useState} from 'react';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import  { ModalForm, ProFormDatePicker, ProFormGroup,ProFormUploadDragger } from '@ant-design/pro-form';
import { momentNow } from '@/utils/utils';
import { FileExcelOutlined } from '@ant-design/icons';
import { RcFile } from 'antd/lib/upload';
const { confirm } = Modal;

export default () => {
  const [spinningFlag,setSpinningFlag] = useState(false);
  const [showDetail, setShowDetail] = useState(false);
  const [proData,setProData] = useState([]);
  const [product,setProduct] = useState('');
  const [stand,setStand] = useState('');
  const [dataList,setDataList] = useState([
    {chineseName:'上海交通大学医学院附属仁济医院',system:'MP1000',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'多孔腔镜手术机器人'
    },
    {chineseName:'上海瑞金医院',system:'MP1001',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'单孔腔镜手术机器人'
    },
    {chineseName:'上海中山医院',system:'MP1002',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'支气管镜机器人'
    },
    {chineseName:'上海中山医院',system:'MP1002',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'立体内窥镜'
    },
    {chineseName:'上海交通大学医学院附属仁济医院',system:'MP1000',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'多孔腔镜手术机器人'
    },
    {chineseName:'上海瑞金医院',system:'MP1001',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'单孔腔镜手术机器人'
    },
    {chineseName:'上海中山医院',system:'MP1002',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'支气管镜机器人'
    },
    {chineseName:'上海中山医院',system:'MP1002',model:'si',
    installDate:'2023-10-10','area':'北区',province:'北京市',city:'大兴区',marketSegment:'三级甲等',
    csrChineseName:'张三',platformStandardName:'平台上A',distributorName:'经销商A',name:'立体内窥镜'
    }
  ]);

  const [dealer,setDealer] = useState('');
  const [areas, setAreas] = useState<any[]>();
  const [activeKey,setActiveKey] = useState<any>("tab0");
  const actionRef = useRef<ActionType>();
  const [showImport, setShowImport] = useState<boolean>(false);

  
  const columns2: ProColumns[] = [
    {
        title: '医院名称',
        dataIndex: 'chineseName',
        width:150,
        ellipsis:true,
    },
    {
      title: '机器型号',
      dataIndex: 'system',
      ellipsis:true,
      width:150,
    },
    {
      title: '机器名称',
      dataIndex: 'name',
      ellipsis:true,
      width:150,
    },
    {
      title: '机型model',
      dataIndex: 'model',
      ellipsis:true,
      width:100,
  },
  {
    title: '入院日期',
    dataIndex: 'installDate',
    hideInSearch:true,
    ellipsis:true,
    width:100,
  },
  {
    title: '大区',
    dataIndex: 'area',
    ellipsis:true,
    width:100,
  },
  
  {
    title: '医院类别',
    width:150,
    ellipsis:true,
    dataIndex: 'marketSegment'
  },
    {
        title: '省/市',
        dataIndex: 'province',
        hideInSearch:true,
        ellipsis:true,
        width:150,
        renderText:(_,record:any)=>{
            return `${record.province}/${record.city}`
        }
    } , 
    
    {
        title: '销售',
        dataIndex: 'csrChineseName',
        ellipsis:true,
        hideInSearch:true,
        width:100,
    },
   
   ,{
        title: '平台商代码',
        dataIndex: 'platformCode',
        width:120,
    },
    {
        title: '平台商名称',
        ellipsis:true,
        dataIndex: 'platformStandardName',
        width:200,
    }
    ,{
      title: '经销商代码',
      dataIndex: 'distributorSfdcCode',
      width:120,
  },
  {
      title: '经销商名称',
      ellipsis:true,
      dataIndex: 'distributorName',
      width:200,
  },
  {
    title:'操作',
    width:120,
    valueType:'option',
    fixed: 'right',
    render: (text, record:any, _, action) => [
       <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => handleDelete(record.dataId)}><a>删除</a></Popconfirm>
      
    ]}
  ]

  
  const handleDelete = async (id: string) => {
    
  };


  return (
    <PageContainer>
       <ProTable
              scroll={{x:1300}}
              headerTitle=''
              columns={columns2}
              actionRef = {actionRef}
              search={{
                  span: 6,
                  labelWidth:120,
                  defaultCollapsed: false,
                  collapseRender:false,
              }}
              // rowKey={activeKey=='tab0'?'reportId':'dataId'}
              rowKey={'id'}
              dataSource={dataList}
            toolBarRender={() => [<Button type='primary' key='primary' onClick={() => {
                          setShowImport(true);
                      }}><FileExcelOutlined/>上传数据</Button>]}
                  toolbar={{settings:[]}}
                  pagination={{
                      pageSizeOptions:['20', '100', '500']
                  }}
          />
      <Spin spinning={spinningFlag} style={{transform:'translate(-50%:-50%)',left:'50%',top:'50%',position:'absolute'}}/>
  </PageContainer>
  );
};